<ui:composition xmlns="http://www.w3.org/1999/xhtml"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:q="http://huliqing.name/qfaces"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	template="/example/_template.xhtml">
	<ui:define name="title">DynFrame Demo</ui:define>
	<ui:define name="header">DynFrame Demo</ui:define>
	<ui:define name="content">
		<q:saveState value="#{dynFrameBean.login}" />
		
		<input type="button" value="#{dynFrameBean.login ? '已登录' : '系统登录'}"
			onclick="var f2 = Q.F.find('frame2'); if (f2) f2.display(true);" />
			
		<input type="button" value="Move to center"
			onclick="var f2 = Q.F.find('frame2'); if (f2) f2.moveToCenter();" />
			
		<input type="button" value="Random move"
			onclick="if (!busy) {stop=false;randomMove();}" />
			
		<input type="button" value="Random move (Loop)"
			onclick="if (!busy) {stop=false;randomMove(true);}" />
			
		<input type="button" value="Stop Loop"
			onclick="stop=true;" />
			
		<input type="button" value="Shade Enable/Disable" id="ShadeButton"
			onclick="Q.F.find('frame2').displayShade();" />

		<h:form>
			<h:commandButton value="改变遮罩颜色(从后台)"  
				action="#{dynFrameBean.changeShadeColor}" />
			<h:commandButton value="改变遮罩透明度(从后台)" 
				action="#{dynFrameBean.changeShadeOpaque}" />
		</h:form>

		<h:form>
			<q:dynFrame id="frame2" 
				binding="#{dynFrameBean.dynFrame}"
				visible="false"
				drag="true" 
				center="true" 
				labelHeader="Login Form"
				shade="true" 
				shadeColor="black" 
				shadeOpaque="0.5"
				onOpen="" 
				onClose="">
				<h:panelGrid columns="2" border="0" cellspacing="3" cellpadding="3">
					<h:outputText value="用户名" />
					<h:panelGroup>
						<h:inputText id="account" style="width:150px;" />
						<q:validator for="account" required="true" message=" 必填,随便填!" />
					</h:panelGroup>

					<h:outputText value="密码" />
					<h:panelGroup>
						<h:inputSecret id="password" style="width:150px;" />
						<q:validator for="password" required="true" message=" 必填,随便填" />
					</h:panelGroup>

					<h:panelGroup />
					<h:panelGroup>
						<h:commandButton value="Login" 
							style="margin-right:10px;" 
							action="#{dynFrameBean.signIn}" />
					</h:panelGroup>
				</h:panelGrid>
			</q:dynFrame>
		</h:form>
		
		<script type="text/javascript" >
			var stop = false; 
			var busy = false;
			function randomMove(loop) {
				if (stop) {
					busy = false;
					return;
				}
				busy = true;
				var dynFrame = Q.F.find('frame2');
				var sX = Q.U.getDocument().scrollLeft;
				var sY = Q.U.getDocument().scrollTop;
				var xLimit = Q.U.getViewportWidth() - dynFrame.width;
				var yLimit = Q.U.getViewportHeight() - dynFrame.height;
				var x = sX + Math.random() * xLimit;
				var y = sY + Math.random() * yLimit;
				if (loop)
					dynFrame.moveTo(x, y, 500, function(){randomMove(loop)});
				else 
					dynFrame.moveTo(x, y, 500, function(){stop=true;busy=false;});
			}
		</script>
	</ui:define>

	<ui:define name="description">
	窗体布局组件,该组件能够帮助完成一些友好的弹出窗口功能，支持定位，移动，遮罩等，
	使用它可以快速高效的完成一些需要窗口提示的功能，使用相当简单
	</ui:define>
	<ui:define name="htmlCode">
		<h:outputText value="#{dynFrameBean.htmlCode}" />
	</ui:define>
	<ui:define name="javaCode">
		<h:outputText value="#{dynFrameBean.javaCode}" />
	</ui:define>
</ui:composition>